<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/public.css" type="text/css">
    <link rel="stylesheet" href="./css/productlist.css">
    <title>商品列表</title>
</head>
<body>
    <div class="header">
        <div class="header_all">
            <div class="header_left">
                <img src="image/index-1.png">
                <div class="header_left_h">
                    <h3>扫码下载寺库APP</h3>
                    <p>给你全世界的美好</p>
                </div>      
            </div>
            <div class="header_center"><a href="#"><img src="image/index-2.jpg" alt=""></a></div>
            <div class="header_right">
                <div class="header_right_top">
                    <p> <a href="login.html">请登录</a> <span>|</span> <a href="register.html">免费注册</a></p>
                    <p class="serve"><a href="#">客户服务<i></i></a></p>
                    <p id="serve_a">
                        <a href="#">在线客服</a>
                        <a href="#">养护中心</a>
                        <a href="#">帮助中心</a>
                        <a href="#">贵宾专线 : 400-78-56789</a>
                    </p>
                    <p class="meiti"><a href="#">媒体聚焦</a></p>
                </div>
                <div class="header_right_bottom">
                    <img src="image/index-3.jpg">
                    <a href="#">购物车</a>
                    <span>(0)</span>
                </div>
            </div>
        </div>
    </div>
    <div class="title">
        <div class="title_all">
                <a href="#">首页</a>
            <div id="container">  
                <a href="#">包袋</a>
                <a href="#">腕表</a>
                <a href="#">珠宝首饰</a>
                <a href="#">服装鞋靴</a>
                <a href="#">配饰</a>
                <a href="#">体育活动</a>
                <a href="#">家居生活</a>
                <a href="#">生活方式</a>
                <a href="#">母婴美妆</a>
                <a href="#">豪车频道</a>
                <div class="clear"></div>
                <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>1</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>2</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content" >
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>3</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>4</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>5</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>6</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>7</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>8</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>9</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>0</li>
                            </ul>
                        </div>
                    </div>             
            </div> 
                <div class="ipt"> <input type="text" value="" placeholder="Roger Vivier" ></div>
            </div>
        </div>
    <div class="product">
        <div class="product_all">
            <div class="product_head">
                <i class="product_head_left"><img src="image/product-little.jpg" draggable="false"/><img src="image/product-little.jpg" draggable="false"/></i>
                <b class="ear">耳饰</b>
                <i class="product_head_right"><img src="image/product-little.jpg" draggable="false"/><img src="image/product-little.jpg" draggable="false"/></i>
            </div>
            <div class="product_list">
                <!-- <div class="product_list1">
                    <img src="/image/product_1.jpg">
                    <p><a href="#">CARAT*/珂珞白色925银CometStud单只耳钉23940-1</a></p>
                    <span>300</span>
                </div>
                <div class="product_list1">
                    <img src="/image/product_2.jpg">
                    <p><a href="#">CARAT*/珂珞白色925银CometStud单只耳钉23940-1</a></p>
                    <span>300</span>
                </div>
                <div class="product_list1">
                    <img src="/image/product_3.jpg">
                    <p><a href="#">CARAT*/珂珞白色925银CometStud单只耳钉23940-1</a></p>
                    <span>300</span>
                </div>
                <div class="product_list1">
                    <img src="/image/product_4.jpg">
                    <p><a href="#">CARAT*/珂珞白色925银CometStud单只耳钉23940-1</a></p>
                    <span>300</span>
                </div> -->
            </div>
            
        </div>
        <div class="product_all">
                <div class="product_head">
                    <i class="product_head_left"><img src="image/product-little.jpg" draggable="false"/><img src="image/product-little.jpg" draggable="false"/></i>
                    <b class="ear">项链</b>
                    <i class="product_head_right"><img src="image/product-little.jpg" draggable="false"/><img src="image/product-little.jpg" draggable="false"/></i>
                </div>
                <div class="product_lists">
                    <!-- <div class="product_list1">
                        <img src="/image/product_1.jpg">
                        <p><a href="#">CARAT*/珂珞白色925银CometStud单只耳钉23940-1</a></p>
                        <span>300</span>
                    </div>
                    <div class="product_list1">
                        <img src="/image/product_2.jpg">
                        <p><a href="#">CARAT*/珂珞白色925银CometStud单只耳钉23940-1</a></p>
                        <span>300</span>
                    </div>
                    <div class="product_list1">
                        <img src="/image/product_3.jpg">
                        <p><a href="#">CARAT*/珂珞白色925银CometStud单只耳钉23940-1</a></p>
                        <span>300</span>
                    </div>
                    <div class="product_list1">
                        <img src="/image/product_4.jpg">
                        <p><a href="#">CARAT*/珂珞白色925银CometStud单只耳钉23940-1</a></p>
                        <span>300</span>
                    </div> -->
                </div>
                
        </div>
    </div>
    <div class="bottom">
            <div class="bottom_top">
                <ul>
                    
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
                <ul>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
                <ul>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
                <ul>
                    <li><a href="#">诗库奢饰品养护</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
        
               
            </div>
            <div class="bottom_bottom">
                <p>统一社会信用代码：91110102689248179K</p>
                <p><img src="image/ga.png"><a href="#">京公安备11010102001392</a></p>
                <p>京ICP证110119号&nbsp;京ICP备09084709号-3</p>
                <p>IS09001中国质量管理体系认证</p><br>
                <p>COPYRIGHT&COPY;2010-2017北京寺库商贸有限公司&nbsp;版却所有</p><br>
                <a href="#" class="low"><img src="image/1.jpg"></a>
                <a href="#" class="low"><img src="image/2.jpg"></a>
                <a href="#" class="low"><img src="image/3.jpg"></a>
                <a href="#" class="low"><img src="image/4.jpg"></a>
                <a href="#" class="low"><img src="image/5.jpg"></a>
            </div>
    </div>
</body>
</html>

<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="js/startMove.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ajax.js"></script>
<script src="js/cookie.js"></script>
<!-- //表头 -->
<script type="text/javascript">
    
    var serve = document.querySelector(".serve");
    serve.onmouseover = function(){
        $id("serve_a").style.display = "block";
    }
    serve.onmouseout = function(){
        $id("serve_a").style.display = "none";
    }
</script>
<!-- //标题下拉列表 -->
<script type="text/javascript">
//页面结构分析 ： 保证标题的下标和内容的下标一一对应
    var bts = document.querySelectorAll("#container a");
    var cons = document.querySelectorAll("#container .content");
    
    for( let i = 0 ; i < bts.length ; i++){
        
        bts[i].onmousemove = function(){
            for( let j = 0 ; j < bts.length ; j++){
                cons[j].style.display = "none";
            }
            cons[i].style.display = "block";
        }
        bts[i].onmouseout = function(){
            cons[i].style.display = "none";
        }
    }
</script>
<script>
    var product_list = document.querySelector(".product_list")
    var product_lists = document.querySelector(".product_lists");
    var product_all = document.querySelector(".product_all")
    //商品数据信息
    var url = `http://jx.xuzhixiang.top/ap/api/allproductlist.php`;
    ajax(url,function(res){
        var html = '';
        console.log(res.data);
        // <a pid = "${obj.data[i].pid}" href="02-produce-xq.html?pid=${data.data[i].pid}"></a>
        for(let i = 0; i < res.data.length; i++) {
                html += `<div class="product_list1">
                <a href="productdetails.html?pid=${res.data[i].pid}"><img src="${res.data[i].pimg}" draggable = "false"></a>
                <p><a href="productdetails.html?pid=${res.data[i].pid}">${res.data[i].pname}</a></p>
                    <span>${res.data[i].pprice}</span>
                </div>`;         
        }	
        product_list.innerHTML += html;
        //console.log( product_list.innerHTML)
        product_lists.innerHTML = product_list.innerHTML;
    })
</script>